<template>
  <mars-select v-model:value="selectVal" ref="select" :options="plotDataOptions" @change="handleChange"></mars-select>

  <ul class="gltf-list">
    <li v-for="item in dataList" :key="item.name" class="gltf-icon f-csp">
      <img :src="item.icon" :title="item.name" @click="showModel(item)" />
    </li>
  </ul>
</template>
<script setup lang="ts">
import { ref, markRaw, computed, onMounted } from "vue"
import * as mapWork from "./map"
import localforage from "localforage"
import { useWidget } from "@mars/common/store/widget"
import { fetchJson } from "@mars/utils/mars-util"

const storeName = "plot"

const plotDataJSON = {}

const plotDataOptions = ref<any[]>([]) // 下拉框数据

const selectVal = ref("") // 选中的标绘类型

const dataList = computed(() => {
  return plotDataJSON[selectVal.value] || []
})

onMounted(() => {
  getPlotData()
})

const getPlotData = async () => {
  const baseUrl = `${process.env.BASE_URL}config/graphic-type.json`
  let jsonData = await fetchJson({ url: baseUrl }) // 获取数据
  // 替换路径JSON内的mars3d_data路径
  jsonData = JSON.parse(JSON.stringify(jsonData).replaceAll("{mars3d_data}", `//data.mars3d.cn`))

  const arrNewGroup = []
  for (let i = 0; i < jsonData.length; i++) {
    const item1 = jsonData[i]
    const children = item1.children
    if (children.length === 0) {
      continue
    }

    let arrNew = []
    if (children[0].children) {
      // 有二层的
      for (let j = 0; j < children.length; j++) {
        const item2 = children[j]
        if (item2.children?.length > 0) {
          arrNew.push(...item2.children)
        }
      }
    } else {
      // 只有一层的
      arrNew = children
    }

    for (let i = 0; i < arrNew.length; i++) {
      const item = arrNew[i]
      if (!item.icon && item.style?.image) {
        item.icon = item.style.image // 使用图片本身
      }
    }

    const name = `${item1.name}`
    arrNewGroup.push({
      value: name,
      label: name + "(" + arrNew.length + ")"
    })
    plotDataJSON[name] = arrNew
  }
  plotDataOptions.value = arrNewGroup

  const laststorage: string = await localforage.getItem(storeName) // 历史记录中选中的值
  selectVal.value = laststorage || plotDataOptions.value[0].value
}

// 下拉框改变
function handleChange() {
  localforage.setItem(storeName, selectVal.value)
}

const showModel = (imgs: any) => {
  mapWork.startDraw(imgs)
}
</script>

<style lang="less" scoped>
.gltf-list {
  margin-top: 10px;
  width: 100%;
  height: calc(100% - 45px);
  overflow: auto;

  display: grid;
  grid-template-columns: repeat(auto-fill, 60px);
  grid-template-rows: repeat(auto-fill, 60px);
  justify-content: center;
  gap: 10px;

  .gltf-icon {
    width: 60px;
    height: 60px;
    border: 1.5px solid white;
    display: grid;
    place-items: center;

    img {
      max-width: 57px;
      max-height: 57px;
    }

    &:hover {
      border-color: #209ffd;
    }
  }
}

.mars-select {
  width: 100%;
}

.mars3d-popup-btn_newStyle {
  padding: 3px 10px;
  border: 1px solid #209ffd;
  background: #209ffd1c;
}
</style>
